<template>
  <div class="header">
    <el-menu mode="horizontal" router>
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/goodCart">购物车</el-menu-item>
      <el-menu-item index="/userOrder">订单</el-menu-item>
      <el-menu-item index="/User">个人中心</el-menu-item>

      <div class="userInfo">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{name}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">退出登陆</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-avatar :size="50" :src="userImgUrl" alt="图片失效"></el-avatar>
      </div>
    </el-menu>
    <div class="line"></div>
  </div>
</template>

<script>
import { searchGood } from "../api/requestapi";
export default {
  name: "Header",

  data() {
    return {};
  },

  methods: {
    search() {
      alert(this.content);
    },

    handleCommand(command) {
      if (command === "logout") {
        //移除数据
        sessionStorage.removeItem("token");
        sessionStorage.removeItem("userinfo");
        sessionStorage.removeItem("userImgUrl");

        //修改vuex数据
        this.$store.commit("setUserdata", { name: "未登录" });
        this.$store.commit("setUserImgUrl", null);
        //要抛出异常 不然会报错
        this.$router.push({ path: "/" }).catch(() => {});
      }
    },
  },

  computed: {
    name() {
      //获取vuex的数据
      console.log(this.$store.getters.getUserdata);
      return this.$store.getters.getUserdata.name;
    },
    userImgUrl() {
      return this.$store.getters.getUserImgUrl;
    },
  },
};
</script>

<style>
.header {
  height: 100px;
  font-family: "微软雅黑";
  font-size: 50px;
}
.logo {
  float: left;
}
.search {
  width: 400px;
  margin-left: 50px;
  float: left;
}
.searchResult {
  border-width: 2px;
  border-color: grey;
  font-size: 15px;
  background-color: #ffffff;
}

#p {
  font-family: "PingFang SC";
  font-size: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>